<template>
  <div class="content">
    <div class="avatarImg layout">
      <h3>头像:</h3>
      <!-- 上传头像 -->
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1:8889/dev/updateAvatar"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :http-request="reqheadpic"
        :disabled="!isUpdate"
      >
        <img v-if="userinfo.user_pic" :src="userinfo.user_pic" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <!-- 个人信息展示和更改 -->
    <!-- 展示区 -->
    <div v-if="!isUpdate">
      <div class="nickname layout">
        <h3>昵称:</h3>
        <span>{{userinfo.nickname?userinfo.nickname:'无名侠'}}</span>
        <span v-if="userinfo.check" class="check">
          <i class="iconfont icon-renzheng"></i>
          {{userinfo.check}}
        </span>
      </div>
      <div class="layout">
        <h3>性别:</h3>
        <span>{{userinfo.gender === 1 ?'男':userinfo.gender === 0?'女':'保密'}}</span>
      </div>
      <div class="from layout">
        <h3>所在地:</h3>
        <span>{{userinfo.from?userinfo.from:'未知'}}</span>
      </div>
      <div class="signature layout">
        <h3>简介:</h3>
        <span>{{userinfo.intro?userinfo.intro:'无'}}</span>
      </div>
      <div class="edit">
        <button @click="isUpdate = true" v-if="$route.params.isMine">修改</button>
      </div>
    </div>
    <!-- 更改区 -->
    <div v-else>
      <div class="nickname layout">
        <h3>昵称:</h3>
        <input v-model="userinfo.nickname" placeholder="昵称" />
      </div>
      <div class="layout">
        <h3>性别:</h3>
        <span class="radio">
          <input type="radio" value="1" id="one" v-model="userinfo.gender" />
          <label for="one">男</label>
          <input type="radio" value="0" id="two" v-model="userinfo.gender" />
          <label for="two">女</label>
          <input type="radio" value="2" id="three" v-model="userinfo.gender" />
          <label for="three">保密</label>
        </span>
      </div>
      <div class="from layout">
        <h3>所在地:</h3>
        <input v-model="userinfo.from" placeholder="武汉职业技术学院" />
      </div>
      <div class="signature layout">
        <h3>简介:</h3>
        <textarea rows="3" cols="60" v-model="userinfo.intro" placeholder="属于你的健康积极个人标签"></textarea>
      </div>
      <div class="layout">
        <h3>权限设置:</h3>
        <!-- 下拉框 -->
        <el-select v-model="userinfo.rights" placeholder="请选择权限等级">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="edit">
        <button @click="saveUserinfo">保存</button>
        <button @click="isUpdate = false">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
// 引入功能函数 图片转化成base64格式
import { getBase64 } from "@/schema/base64";
export default {
  data() {
    return {
      isUpdate: false, //控制更改和只读的切换
      //收集用户信息
      userinfo: {
        nickname: undefined, //昵称
        gender: 2, //性别
        from: undefined, //所在地
        intro: undefined, //个人标签
        user_pic: undefined, //用户头像
        rights: "1", //权限等级，默认是1
      },
      //权限选择数据
      options: [
        {
          value: "1",
          label: "权限1 ：任何人可查看我的发布,喜欢,关系,留言",
        },
        {
          value: "2",
          label: "权限2 ：只可查看我的发布,喜欢",
        },
        {
          value: "3",
          label: "权限3 ：只可查看我的关系,留言",
        },
        {
          value: "4",
          label: "权限4 ：任何人不可查看",
        },
      ],
    };
  },
  mounted() {
    // 获取个人资料信息  我在这使用v-if控制只读和修改展示的切换，可以避免丢失响应式

    //判断是阅读者，还是使用者
    if (this.$route.params.isMine) {
      this.getUserinfo();
    } else {
      this.visitUserinfo();
    }
  },
  methods: {
    // 获取个人资料信息回调
    async getUserinfo() {
      let result = await this.$API.getUserinfo();
      if (result.code === 200) {
        // 传递给父组件访问用户的权限,用来切换的判断
        this.$emit("getRights", result.data.rights);
        this.userinfo = result.data;
      } else {
        return this.$message(result.message);
      }
    },
    // 更新个人资料信息回调
    async saveUserinfo() {
      // 因为头像太大，且我们不需要，在发送给服务器时删掉(头像是单独上传的)
      let data = {};
      let { nickname, gender, from, intro, rights } = this.userinfo;
      Object.assign(data, { nickname, gender, from, intro, rights });
      // 发送请求
      let result = await this.$API.saveUserinfo(data);
      if (result.code === 200) {
        // 更新vuex信息
        this.$store.dispatch("getuserinfo");
        this.$message({
          type: "success",
          message: result.message,
        });
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
      // 切换到阅读展示
      this.isUpdate = false;
      // 更新vuex的个人信息
      this.getUserinfo();
    },
    // 发送更新头像请求回调
    async reqheadpic(file) {
      // 需要new一个formdata，后端的multiparty只会解析formdata数据
      let formdata = new FormData();
      formdata.append("file", file.file);
      let result = await this.$API.reqheadpic(formdata);
      if (result.code === 200) {
        this.userinfo.user_pic = result.data;
        this.$message({
          type: "success",
          message: result.message,
        });
        // 更新vuex信息
        this.$store.dispatch("getuserinfo");
        // 切换到阅读展示
        this.isUpdate = false;
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
    },
    // 上传前的回调
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 访问用户信息
    async visitUserinfo() {
      let result = await this.$API.visitUserinfo(this.$route.params.uuId);
      if (result.code === 200) {
        this.userinfo = result.data;
        // 传递给父组件访问用户的权限,用来切换的判断
        this.$emit("getRights", result.data.rights);
      } else {
        return this.$message(result.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  .check {
    margin: 5px 0 0 10px;
    font-size: 12px;
    color: #008c8c;
    i {
      font-size: 12px;
    }
  }
  .layout {
    margin: 10px 0;
    display: flex;
    justify-content: start;
  }
  h3 {
    min-width: 60px;
    margin-right: 20px;
    font-weight: 600;
    color: #008c8c;
  }
  input {
    border: none;
    border-bottom: 1px solid #008c8c;
    text-align: center;
  }
  textarea {
    border-radius: 5px;
    text-indent: 5px;
  }
  .radio {
    label {
      margin-right: 40px;
    }
  }
  .edit {
    button {
      border: none;
      outline: none;
      border-radius: 5px;
      padding: 5px 10px;
      background: #008c8c;
      color: #fff;
      margin: 0 10px;
    }
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>